<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>易骏云 - BI</title>
    <link href="css/iview.css" rel="stylesheet" />
    <link href="css/vant.css" rel="stylesheet" />
    <link href="css/vue_vant.css" rel="stylesheet" />
    <link rel="stylesheet" href="image/icon/iconfont.css" />
    <style>
        .fontSize18 {
            font-size: 18px;
        }

        .fontSize16 {
            font-size: 16px;
        }

        .textLeft {
            text-align: left;
            padding-left: 5px;
        }

        .textRight {
            text-align: right;
            padding-right: 10px;
        }

        .textCenter {
            text-align: center;
        }

        .texteee {
            color: #999;
        }

        .marginLeft {
            margin-left: 5px;
        }

        .line30 {
            line-height: 30px;
        }

        .paddingleft {
            padding-left: 8px;
        }

        .padding8 {
            padding: 0 8px;
        }

        .activation-code-manage {
            background: white;
            overflow: hidden;
            height: calc(100vh - 95px);
            display: flex;
            flex-direction: column;
        }

        .activation-code-manage .total {
            height: 20px;
            line-height: 20px;
            font-size: 20;
            font-weight: 600;
            margin: 5px 15px;
        }

        .activation-code-manage .list-wrapper {
            flex: 1;
            background: white;
            overflow: auto;
            margin: 5px 15px;
            position: relative;

        }

        .activation-code-manage .list-wrapper .header {
            background: #eee;
            /* color: white; */
            border: none;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .activation-code-manage ul {
            min-width: 450px;
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
        }

        .activation-code-manage li {
            width: 100px;
            font-weight: 500;
            text-align: center;
        }

        .activation-code-manage .column-large {
            width: 60px;
        }

        .tabs {
            line-height: 20px;
        }

        .tabs .van-col {
            text-align: center;
        }

        .tabs .van-tabs--line .van-tabs__wrap {
            height: 30px;
        }

        .borderRight {
            border-right: 1px solid #eee;
        }

        .border_Bot {
            border-bottom: 1px solid #eee;
        }

        .padding3 {
            padding: 3px 0;
        }

        .screen {
            text-align: center;
            font-size: 0.8rem;
            position: relative;
        }

        .screen i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 15px;
        }

        .img {
            width: 50px;
        }

        .van-dialog {
            background: none;
        }

        .van-dialog .van-dialog__content {
            position: relative;
            height: 300px;
        }

        .imgEnlarged {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
        }

        .screeTit {
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #646566;
            border-bottom: 1px solid #ccc;
        }

        .condiName {
            line-height: 30px;
            padding-left: 5px;
        }

        .condiList {
            background: #ccc;
            line-height: 25px;
            height: 25px;
            margin-bottom: 5px;
            text-align: center;
            border: 1px solid #ccc;
        }

        .selectScree .condiList {
            background: #f8ddaa;
            color: orange;
            border-color: #f8ddaa;
        }

        .rakingHeader {
            line-height: 25px;
            padding: 5px 0;
        }

        .returnBtn {
            position: relative;
            padding-left: 25px;
        }

        .returnBtn img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 5px;
            width: 20px;
        }

        .screeInput {
            padding: 0px 5px;
            background: #eee;
            line-height: 27px;
            width: 83%;
            /* overflow: hidden; */
        }

        .screeInput i {
            color: orange;
            font-size: 20px;
            display: flex;
            align-items: center;
            height: 27px;
        }

        .yellowc {
            color: #eb8e25;
            font-size: 16px;
            font-weight: bold;
        }

        .imgcoms {
            width: 60px;
            height: 20px;
            object-fit: contain;
        }

        .screeInput input {
            background: #eee;
            border: none;
            font-size: 14px;
            color: black;
            padding-left: 5px;
        }

        .refresh {
            text-align: center;
            width: 50px;
            height: 26px;
            line-height: 26px;
            border: 1px solid orange;
            color: orange;
            border-radius: 4px;
        }

        .rem8 {
            font-size: 0.8rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="ranking">
            <van-row gutter="10" class="border_Bot rakingHeader">
                <!-- <van-col span="5" @click="window.history.go(-1)" class="textLeft returnBtn">
                <img src="img/icon_返回@1x.png" alt="" /><span class="rem8">返回</span>
            </van-col> -->
                <van-col span="15" class="screeInput">
                    <van-icon name="search" :size="20" color="orange" />
                    <input type="text" class="input" v-model="queryTest" placeholder="输入序号或款号查询" />
                </van-col>
                <van-col span="4" class="textRight">
                    <div class="refresh" @click="getList">
                        刷新
                    </div>
                </van-col>
            </van-row>

            <van-row gutter="10">
                <div style="margin:20px 15px;text-align: center;">
                    <van-col span="8" @click="winOpen('1')">
                        <div><img src="img/list-active.png" alt="" class="imgcoms" /></div>
                        <div style="margin-top:10px;color:#000;font-size:18px;">商品列表</div>
                    </van-col>
                    <van-col span="8" class="" @click="winOpen('2')">
                        <div><img src="img/paimingfenxi.png" alt="" class="imgcoms" /></div>
                        <div style="margin-top:10px;color:#000;font-size:18px;">排名分析</div>
                    </van-col>
                    <van-col span="8" class="" @click="winOpen('3')">
                        <div><img src="img/zonghefenxi.png" alt="" class="imgcoms" /></div>
                        <div style="margin-top:10px;color:#000;font-size:18px;">综合分析</div>
                    </van-col>
                </div>
            </van-row>


            <hr / style="margin:30px 0;">
            <van-row gutter="10">
                <div style="margin:20px 15px;text-align: center;">
                    <van-col span="8" v-for="(Od,I) in dataList" :key="Od.col3">
                        <div class="yellowc" style="margin-top:10px;">{{Od.col3}}</div>
                        <div style="margin-top:10px;color:#000;font-size:18px;">{{Od.col2}}</div>
                    </van-col>
                </div>
            </van-row>

        </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/iview.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/hammer.js" type="text/javascript" charset="utf-8"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    dateActive: '1',
                    active: '1',
                    rData: {
                        dtlist: []
                    },
                    url: '',
                    access_token: '',
                    begin_end_date: [],
                    show: false,
                    showM: false,
                    minDate: new Date(2010, 0, 1),
                    maxDate: new Date(),
                    currentDate: new Date(),
                    billdate: '',
                    dataList: [],
                    rankingAmount: 1,
                    stylesRanking: 1,
                    regional: 1,
                    sum: 0,
                    imgEnlarged: false,
                    url: '',
                    screeShow: false,
                    stylesList: [],//款式过滤条件
                    selectScreeList: [],//存放所有选中的筛选条件
                    queryTest: '',
                    imgurl: 'https://hz.enginesoft.cn/eboss_yun/server',
                };
            },
            methods: {
                select(index, title) {
                    this.getList()
                },
                filtration(item, index, listitem) {
                    let num = this.selectScreeList[index].findIndex(i => i === listitem.id);
                    if (num > -1) {
                        this.selectScreeList[index].splice(num, 1)
                    } else {
                        this.selectScreeList[index].push(listitem.id)
                    }
                },
                winOpen(O) {
                    console.log('0', O)
                     const orderidValue = this.getQueryParam('orderid'); // "John"
                    if (O == '2') {
                        let url = 'ranking.html?orderid='+orderidValue;
                        window.location.href = url;
                    } else if (O == '3') {
                        window.location.href = `commonpaiming.html?orderid=`+orderidValue;
                    }
                },
                openInstitutions() {

                },
                getQueryParam(param) {
                    const search = window.location.search.substring(1); // 去掉开头的 '?'
                    const params = search.split('&');
                    for (let i = 0; i < params.length; i++) {
                        const [key, value] = params[i].split('=');
                        if (key === param) {
                            return decodeURIComponent(value); // 解码 URL 编码的字符
                        }
                    }
                    return null; // 参数不存在
                },
                getScreenList() {
                    const orderidValue = this.getQueryParam('orderid'); // "John"
                    console.log('urlParams', orderidValue);
                    let that = this
                    $.ajax({
                        url: 'http://hz.ebosserp.com/eBoss_YUN/webapi.ashx',
                        type: "post",
                        data: JSON.stringify({
                            api: "dhh_GetAttrib.t",
                            token: this.token,
                            orderid:orderidValue
                        }),
                        success: (res) => {
                            if (res.code == 200) {
                                this.stylesList = res.data;
                                this.selectScreeList = Array.from({ length: this.stylesList.length || 0 }, () => []);
                            } else {
                                that.$Message.error({
                                    content: "暂无数据",
                                    duration: 5,
                                });
                            }
                        }
                    })
                },
                // 筛选后重新请求
                getScreen() {
                    this.attribsData = {};
                    this.selectScreeList.forEach((item, index) => {
                        if (item.length > 0) {
                            this.attribsData['attrib' + Number(this.stylesList[index].attribdef)] = item.join(',')
                        }
                    })
                    this.getList()
                },
                openScreen() {
                    this.screeShow = true;
                },
                enlarged(data) {
                    this.imgEnlarged = true;
                    this.url = this.imgurl + data.image1_path
                },
                getList() {

                    let that = this
                    const orderidValue = that.getQueryParam('orderid'); // "John"
                    console.log('urlParams', orderidValue);
                    $.ajax({
                        url: this.url,
                        type: "post",
                        data: JSON.stringify({
                            orderid: orderidValue,
                            api: "dhh_GetMain.t",
                            token: this.token,
                            // rank_type_1: this.rankingAmount,
                            // rank_type_2: this.stylesRanking,
                            // rank_type_3: this.regional,
                            // attribs: this.attribsData,
                            // access_token: this.access_token,
                            // style: this.queryTest
                        }),
                        success: (res) => {
                            if (res.code == 200) {
                                this.dataList = res.data;
                            } else {
                                that.$Message.error({
                                    content: "暂无数据",
                                    duration: 5,
                                });
                            }
                        }
                    })
                },
                getQueryData() {
                    let oSearchItem = {};
                    let searchString = window.location.search;
                    let reg = /[?&][^?&]+=[^?&]+/g;
                    let arr = searchString.match(reg);
                    if (arr) {
                        arr.forEach((item) => {
                            let tempArr = item.substring(1).split("=");
                            let key = decodeURIComponent(tempArr[0]);
                            let value = decodeURIComponent(tempArr[1]);
                            oSearchItem[key] = value;
                        });
                    }
                    return oSearchItem
                },
            },
            created() {
                if (this.getQueryData().token) {
                    console.log('this.getQueryData().token', this.getQueryData().token)
                    sessionStorage.setItem('token_', this.getQueryData().token)
                    sessionStorage.setItem('token', String(this.getQueryData().ccode) + this.getQueryData().token)
                }
            },
            mounted() {
                this.token = sessionStorage.getItem('token_') //'08CA02B70D60473399593A249F63A645'1
                this.access_token = sessionStorage.getItem('token')
                this.url = 'http://hz.ebosserp.com/eBoss_YUN/webapi.ashx';
                // this.getScreenList()
                this.getList()
            }
        });
        const element = document.getElementById('app');
        const hammer = new Hammer(element);
        hammer.on('swipe', function (ev) {
            switch (ev.direction) {
                // case Hammer.DIRECTION_LEFT:
                // 	alert('Swiped left');
                // 	break;
                case Hammer.DIRECTION_RIGHT:
                    window.history.go(-1)
                    break;
                // 可以添加其他方向的处理...  
            }
        })
    </script>

</body>

</html>